<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>题库管理</el-breadcrumb-item>
      <el-breadcrumb-item>题目列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span="4">
          <el-select v-model="queryParam.chapterId" clearable @clear="pageList" @change="pageList" placeholder="请选择章节">
            <el-option v-for="item in chapters" :key="item.chapterId" :value="item.chapterId" :label="item.chapterName"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryParam.questionType" clearable @clear="pageList" @change="pageList" placeholder="请选择题型">
            <el-option v-for="item in questionType" :key="item.key" :value="item.key" :label="item.value"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="chapterId" label="章节" :formatter="chapterFormatter" width="240px"/>
        <el-table-column prop="questionType" label="题型" :formatter="questionTypeFormatter" width="70px"/>
        <el-table-column prop="shortTitle" label="题干" show-overflow-tooltip/>
        <el-table-column prop="score" label="分数" width="60px"/>
        <el-table-column prop="ctime" label="创建时间" width="160px"/>
        <el-table-column label="操作" align="center" width="220px">
          <template v-slot="{row}">
            <el-button size="mini" @click="showQuestion(row)">预览</el-button>
            <el-button size="mini" @click="editQuestion(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteQuestion(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <pagination 
        v-show="total>0" 
        :total="total" 
        :page.sync="queryParam.pageIndex" 
        :limit.sync="queryParam.pageSize"
        @pagination="search"/>
    </el-card>
    <el-dialog :visible.sync="questionShow.dialog" style="width: 100%;height: 100%" @close="dialogClosed">
      <QuestionShow :qType="questionShow.qType" :question="questionShow.question"/>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import questionApi from '@/api/question'
import QuestionShow from './components/Show'
import Pagination from '@/components/Pagination'
export default {

  components: { Pagination, QuestionShow },

  data () {
    return {
      queryParam: {
        questionType: null,
        chapterId: null,
        level: null,
        pageIndex: undefined,
        pageSize: undefined
      },
      // 获取到的用户总条数
      total: 0,
      tableData: [],
      questionShow: {
        qType: 0,
        dialog: false,
        question: null
      }
    }
  },
  props: {
    mainLevel: {
      type: Number
    }
  },
  watch: {
    mainLevel() {
      this.queryParam.chapterId = null
      this.queryParam.questionType = null
      this.pageList()
    }
  },
  created() {
    this.pageList()
  },
  methods: {
    pageList() {
      this.queryParam.pageIndex = this.page.index
      this.queryParam.pageSize = this.page.size
      this.queryParam.level = this.mainLevel
      this.search()
    },
    search() {
      questionApi.pageList(this.queryParam).then(data => {
        if (data.code === this.ok.code) {
          this.tableData = data.response.list
          this.total = data.response.total
          this.queryParam.pageIndex = data.response.pageNum
        }
      })
    },
    showQuestion (row) {
      let _this = this
      this.questionShow.dialog = true
      questionApi.select(row.questionId).then(re => {
        console.log(re.response);
        _this.questionShow.qType = re.response.questionType
        _this.questionShow.question = re.response
      })
    },
    dialogClosed() {
      this.questionShow.qType = null
      this.questionShow.question = null
    },
    editQuestion(row) {
      let url = this.enumFormat(this.editUrlEnum, row.questionType)
      this.$router.push({ path: url, query: { id: row.questionId } })
    },
    async deleteQuestion(row) {
      let _this = this
      if (_this.multipleSelection && _this.multipleSelection.length <= 0) {
        _this.$message.warning('请选中需要删除的记录')
      } else {
        // 弹窗询问用户是否删除数据
        const confirmResult = await _this.$confirm(
          '此操作将永久删除该题, 是否继续?', 
          '提示', 
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)

        // 如果用户确认删除，则返回值为字符串 confirm
        // 如果用户取消了删除，则返回值为字符串 cancel
        if (confirmResult !== 'confirm') {
          return _this.$message.info('已取消删除')
        }

        questionApi.deleteQuestion(row.questionId).then(re => {
          if (re.code === this.ok.code) {
            _this.pageList()
            _this.$message.success(re.message)
          } else {
            _this.$message.error(re.message)
          }
        })
      }
    },
    questionTypeFormatter(row, column, cellValue, index) {
      return this.enumFormat(this.questionType, cellValue)
    },
    chapterFormatter(row, column, cellValue, index) {
      return this.chapterEnumFormat(cellValue)
    },
  },
  computed: {
    ...mapGetters('enumItem', [
      'enumFormat'
    ]),
    ...mapState('page', {
      page: state => state.page
    }),
    ...mapState('resCode', {
      ok: state => state.OK
    }),
    ...mapState('chapter', {
      chapters: state => state.chapters
    }),
    ...mapGetters('chapter', [
      'chapterEnumFormat'
    ]),
    ...mapState('enumItem', {
      questionType: state => state.question.typeEnum,
      editUrlEnum: state => state.question.editUrlEnum
    })
  }
}
</script>

<style lang="less" scoped>

</style>